<template>
  <div class="app-container">
    <h1>这是学生试卷列表</h1>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="考试名称" width="150">
        <template slot-scope="scope">
          {{ scope.row.exam_name }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.start_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试时长" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.exam_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.college }}</span>
          <el-button v-if="scope.row.reply == 0&&scope.row.start == 1" @click="getPaper(scope.row.test_id, scope.row.exam_time)">开始考试</el-button>
          <el-button v-if="scope.row.reply == 1" @click="getScore(scope.row.test_id)">成绩查询</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="scoreShow">
      <h4>亲爱的{{ studentName }} 同学,你好,你在{{ paperName }}考试中,得分为{{ paperScore }},总分为{{ totalScore }}</h4>
      <el-button @click="close()">知道了</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { studentGetPapers, studentGetScore } from '@/api/paper'

export default {
  data() {
    return {
      timer: '',
      list: null,
      listLoading: true,
      studentName: this.$store.getters.name,
      paperName: '',
      paperScore: '',
      totalScore: 0,
      scoreShow: false
    }
  },
  created() {
    console.log(this.$route.query.c_id)
    this.fetchData()
  },
  mounted() {
    this.timer = setInterval(this.fetchData, 60000)
  },
  methods: {
    fetchData() {
      // this.listLoading = true
      studentGetPapers({ c_id: this.$route.query.c_id, s_id: this.$store.getters.id }).then(response => {
        if (this.list !== response.exams) {
          this.list = response.exams
        }
        this.listLoading = false
        console.log(this.list)
      })
    },
    getScore(t_id) {
      studentGetScore({ test_id: t_id, s_id: this.$store.getters.id }).then(response => {
        this.paperName = response.exam_name
        this.paperScore = response.score
        this.totalScore = response.totalScore
        console.log(response)
      })
      this.scoreShow = true
    },
    close() {
      this.scoreShow = false
    },
    getPaper(t_id, time) {
      this.$router.push({ path: '/student/test', query: { test_id: t_id, c_id: this.$route.query.c_id, exam_time: time }})
    }
  }
}

</script>

